<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <!-- 信息 -->
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />
    <title>admin-vuetify登录</title>
    <meta name="author" content="尘跃" />

    <link rel="stylesheet" href="/css/style-vuetify.css">

    <!-- 百度统计 -->
    <script src="/js/tongji.js"></script>
    <!-- Vue3 -->
    <script src="/js/vue/vue.global.prod.js"></script>
    <!-- Vue UI LIB -->
    <link rel="stylesheet" href="/css/vue/vuetify.min.css">
    <script src="/js/vue/vuetify.min.js"></script>
    <script src="/js/third/touch-emulator.js"></script>
    <!-- Google ADS -->
    <!-- <meta name="google-adsense-account" content="ca-pub-7556556693775855"> -->
    <!-- <script src="/js/ads.js"></script> -->

</head>
<body>
    <div id="app"></div>

    <script>
        const vuetify = Vuetify.createVuetify();
        const app = Vue.createApp({
            template: `
                <v-app>
                    <v-app-bar
                        color="primary"
                    >
                        <v-app-bar-title>admin-vuetify登录</v-app-bar-title>
                    </v-app-bar>

                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    <br>
                    
                    <div
                        style=""
                    >
                        <v-form
                            v-model="form"
                            @submit.prevent="onSubmit"
                            style="box-sizing: border-box;padding: 1em;width: auto;"
                        >
                            <v-text-field
                                v-model="username"
                                :readonly="登录中"
                                :rules="[required]"
                                class="mb-2"
                                label="用户名"
                                clearable
                            ></v-text-field>

                            <v-text-field
                                v-model="password"
                                :readonly="登录中"
                                :rules="[required]"
                                label="密码"
                                placeholder="Enter your password"
                                clearable
                            ></v-text-field>

                            <br>

                            <v-btn
                                :disabled="!form"
                                :loading="登录中"
                                color="success"
                                size="large"
                                type="submit"
                                variant="elevated"
                                block
                            >
                                登录
                            </v-btn>
                        </v-form>
                    </div>
                    
                </v-app>
            `,

            async mounted() {

            },

            data() {
                return {
                    form: false,
                    登录中: false,
                    username: "",
                    password: ""
                }
            },

            watch: {

            },

            methods: {
                required (v) {
                    return !!v || '该字段不能为空'
                },

                onSubmit() {
                    if (!this.form) return;

                    this.登录中 = true;
                    alert("登录");
                    this.登录中 = false;
                }
            }
        });
        app.use(vuetify).mount('#app')
    </script>
</body>
</html>

